<template>
  <div class="search-result">
    <van-tabs
      @click="navResult"
      sticky
      v-model="activeName">
      <van-tab
        title="歌曲"
        name="1">
        <van-list
          v-model="loading"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="onLoad(activeName)"
        >
          <van-cell
            v-for="(item, index) in songList"
            :key="index">
            <div
              class="display">
              <van-icon
                name="play-circle-o"
                color="#ee0a24"
                @click="playSong(item.id, item.artists[0].img1v1Url)"/>
              <span>{{ item.name }}</span>
              <span>{{ item.artists[0].name }}</span>
              <span>{{ item.duration | formatDuration }}</span>
            </div>
          </van-cell>
        </van-list>
      </van-tab>

      <van-tab
        title="歌单"
        name="1000">
        <van-list
          v-model="loading"
          class="items"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="onLoad(activeName)"
        >
          <div
            class="item"
            v-for="(item, index) in playList"
            :key="item.id+index"
          >
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{ item.playCount | formatCount }}</span>
              </div>
              <img :src="item.coverImgUrl" @click="tosonglist(item.id)" />
            </div>
            <p class="name">{{ item.name }}</p>
          </div>
        </van-list>
      </van-tab>

      <van-tab
        title="Mv"
        name="1004">
        <van-list
          v-model="loading"
          :error.sync="error"
          class="items"
          error-text="暂无数据"
          @load="onLoad(activeName)"
        >
          <div
            class="item"
            v-for="(item, index) in mvList"
            :key="index"
          >
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{ item.playCount | formatCount }}</span>
              </div>
              <img :src="item.cover" @click="tomv(item.id)" />
            </div>
            <p class="name">{{ item.name }}</p>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { search } from '@/api/search'
import bus from '@/utils/bus'

export default {
  name: 'SearchResult',
  components: {},
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      activeName: 1,
      songList: [],
      playList: [],
      mvList: [],
      error: false,
      // 页容量
      limit: 80,
      // 页码
      page: 1,
      loading: false,
      total: 0
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    navResult () {
      this.mvList = []
      this.playList = []
      this.songList = []
      this.onLoad(this.activeName)
    },
    async onLoad (type) {
      const { limit, searchText, page } = this
      // 1. 请求获取歌单信息数据
      const list = await search(
        searchText,
        limit,
        (page - 1) * 30,
        type
      )
      // 2. 把数据放到数组中
      switch (type) {
        case '1':
          this.songList.push(...list.data.result.songs)
          this.total = list.data.result.songCount
          this.loading = false
          this.page++
          if (this.songList.length >= this.total) {
            this.finished = true
          }
          break
        case '1000':
          this.playList.push(...list.data.result.playlists)
          this.total = list.data.result.playlistCount
          this.loading = false
          this.page++
          if (this.playList.length >= this.total) {
            this.finished = true
          }
          break
        case '1004':
          if (!list.data.result.mvCount) {
            this.finished = true
            return
          }
          this.mvList.push(...list.data.result.mvs)
          this.total = list.data.result.mvCount
          this.loading = false
          this.page++
          break
      }
      // 3. 设置本次加载状态结束，它才可以判断是否需要加载下一次，否则就会永远的停在这里
      // 4. 数据全部加载完成
      // 没有数据了，把加载状态设置结束，不再触发加载更多
    },
    playSong (id, imgUrl) {
      bus.$emit('songId', id, imgUrl)
    },
    tosonglist (id) {
      this.$router.push({
        name: 'm.songlist',
        params: {
          id
        }
      })
    },
    tomv (id) {
      this.$router.push({
        name: 'm.mvlist',
        params: {
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.search-result{
  .display{
    display: flex;
    justify-content: space-around;
    align-items: center;
    span{
      font-size: 3vw;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    span:nth-child(1){
      width: 50%;
    }
     span:nth-child(2){
      width: 40%;
    }
     span:nth-child(3){
      width: 10%;
    }
  }
  .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 30%;
      margin-right: 10px;
      margin-bottom: 10px;
      .img-wrap {
        width: 100%;
        position: relative;
        img {
          width: 100%;
          border-radius: 5px;
        }
        .num-wrap {
          position: absolute;
          color: white;
          top: 0;
          right: 0;
          display: flex;
          align-items: center;
          font-size: 3vw;
          padding-right: 5px;
          padding-top: 2px;
        }
      }
      .name {
        font-size: 3.333vw;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }
}
</style>
